<template>
  <div id="cardhgth">
    <Card>
      <div slot="title">
        <div class="edit-head">
          <a @click="goBack" class="back-title">
            <Icon type="ios-arrow-back" />返回
          </a>
        </div>
      </div>
      <div>
        <!-- <Row>
            <Col span="5" push="">1</Col>
            <Col span="5" push="5">2</Col>
            <Col span="3" push="1">3</Col>
          </Row> -->
        <!-- 信息 -->
        <div>
          <div
            style="display: flex; justify-content: space-between; height: 85px"
          >
            <!-- 订单编号： -->
            <div>
              <div class="newcarrier">
                <div class="shipper">
                  <span>托运人</span>
                </div>
                <div class="Ownerportrait">
                  <img
                    :src="this.shipperAvatar"
                    v-show="this.shipperAvatar != ''"
                    alt=""
                    srcset=""
                  />
                </div>
                <div class="carrierName">
                  <div>
                    <!--  -->
                    <span
                      style="color: #08c; cursor: pointer"
                      @click="LookCargoOwnerInfo"
                      >{{
                        this.ownerInformationData.cargoOwnerInfoVo.personalName
                      }}</span
                    >
                    <span class="carrierName1">{{
                      this.ownerInformationData.cargoOwnerInfoVo.mobile
                    }}</span>
                  </div>

                  <div class="Owner-company">
                    <span
                      v-if="
                        this.ownerInformationData.cargoOwnerInfoVo
                          .companyName != ''
                      "
                    >
                      {{
                        this.ownerInformationData.cargoOwnerInfoVo.companyName
                      }}
                    </span>
                    <span
                      style="color: #a9a9a9"
                      v-if="
                        this.ownerInformationData.cargoOwnerInfoVo
                          .companyName == '' ||
                        this.ownerInformationData.cargoOwnerInfoVo
                          .companyName == null
                      "
                    >
                      未进行企业认证</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="newcarrier newcarrierLeft">
                <div class="carrier">
                  <span>承运人</span>
                </div>
                <div class="Ownerportrait">
                  <!-- carrierAvatar 承运人头像 -->
                  <img
                    :src="this.carrierAvatar"
                    v-show="this.carrierAvatar != ''"
                    alt=""
                    srcset=""
                  />
                </div>
                <div class="carrierName">
                  <div>
                    <span>{{
                      this.ownerInformationData.platformInfoVo.abbreviation
                    }}</span>
                    <span class="carrierName1">{{
                      this.ownerInformationData.platformInfoVo.companyPhone
                    }}</span>
                  </div>

                  <div class="Owner-company">
                    <span
                      v-if="
                        this.ownerInformationData.platformInfoVo.companyName !=
                        ''
                      "
                    >
                      {{ this.ownerInformationData.platformInfoVo.companyName }}
                    </span>
                    <span
                      style="color: #a9a9a9"
                      v-if="
                        this.ownerInformationData.platformInfoVo.companyName ==
                          '' ||
                        this.ownerInformationData.platformInfoVo.companyName ==
                          null
                      "
                    >
                      未进行企业认证</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="ordertiem">
              <div>
                <span
                  :class="
                    this.ownerInformationData.degreeUrgency == '1'
                      ? 'ordinary'
                      : this.ownerInformationData.degreeUrgency == '2'
                      ? 'emergencyState'
                      : this.ownerInformationData.degreeUrgency == '3'
                      ? 'extraUrgent'
                      : 'ordinary'
                  "
                >
                  {{
                    this.ownerInformationData.degreeUrgency == "1"
                      ? "普通"
                      : this.ownerInformationData.degreeUrgency == "2"
                      ? "紧急"
                      : this.ownerInformationData.degreeUrgency == "3"
                      ? "特急"
                      : "普通"
                  }}
                </span>
                <!-- 待审核 审核失败  待执行 报价中 已关闭 已完结-->
                <span
                  :class="
                    this.ownerInformationData.status == '0'
                      ? 'quotation'
                      : this.ownerInformationData.status == '1'
                      ? 'deeltes'
                      : this.ownerInformationData.status == '2'
                      ? 'deeltes'
                      : this.ownerInformationData.status == '3'
                      ? 'AuditFailed'
                      : 'deeltesWays'
                  "
                >
                  {{
                    this.$options.filters["ORDER_SOURCE_STATUS"](
                      this.ownerInformationData.status
                    )
                  }}
                </span>
              </div>

              <div style="color: #999999; width: 150px; margin-left: 10px">
                {{ this.ownerInformationData.createTime }}
              </div>
            </div>
          </div>
          <!--  -->
        </div>
        <!-- 货物信息 -->
        <div class="Line"></div>
        <div>
          <el-descriptions
            class="margin-top SourcIormation"
            title="订单信息"
            :column="4"
            size="medium"
            border
          >
            <template slot="extra">
              <Row class="operation"> </Row>
            </template>
            <!-- 地址 -->
            <el-descriptions-item>
              <template slot="label"> 装货地址： </template>
              {{ this.beginAreaCodeShow }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 详细地址 ： </template>
              {{ this.ownerInformationData.beginAddress }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 装运范围： </template>
              {{ this.ownerInformationData.pretendEnclosure }} km
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">装运时效： </template>
              {{ this.ownerInformationData.loadingTime }} 小时
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 发货单位： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.extractName == '' ||
                  this.ownerInformationData.extractName == null
                "
              >
                未填写
              </span>
              <span v-else> {{ this.ownerInformationData.extractName }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 证件号码： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.loadingIdCard == '' ||
                  this.ownerInformationData.loadingIdCard == null
                "
              >
                未填写
              </span>
              <span v-else> {{ this.ownerInformationData.loadingIdCard }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 联系人： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.extracContactName == '' ||
                  this.ownerInformationData.extracContactName == null
                "
              >
                未填写
              </span>
              <span v-else>
                {{ this.ownerInformationData.extracContactName }}</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 联系电话： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.extractPhone == '' ||
                  this.ownerInformationData.extractPhone == null
                "
              >
                未填写
              </span>
              <span v-else> {{ this.ownerInformationData.extractPhone }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label"> 卸货地址： </template>
              {{ this.endAreaCodeShow }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 详细地址： </template>
              {{ this.ownerInformationData.endAddress }}
            </el-descriptions-item>
            <el-descriptions-item
              label-class-name="my-label"
              content-class-name="my-content"
            >
              <template slot="label"> 签收范围： </template>
              {{ this.ownerInformationData.dischargeEnclosure }} km
            </el-descriptions-item>

            <el-descriptions-item
              label-class-name="my-label"
              content-class-name="my-limitation"
            >
              <template slot="label"> 运输时效： </template>
              {{ this.ownerInformationData.prescription }} 小时
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">收货单位： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.takeName == '' ||
                  this.ownerInformationData.takeName == null
                "
              >
                未填写
              </span>
              <span v-else> {{ this.ownerInformationData.takeName }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 证件号码： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.idCardOrBusLicenseNo == '' ||
                  this.ownerInformationData.idCardOrBusLicenseNo == null
                "
              >
                未填写
              </span>
              <span v-else>
                {{ this.ownerInformationData.idCardOrBusLicenseNo }}</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 联系人： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.takeContactName == '' ||
                  this.ownerInformationData.takeContactName == null
                "
              >
                未填写
              </span>
              <span v-else>
                {{ this.ownerInformationData.takeContactName }}</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 联系电话： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.takePhone == '' ||
                  this.ownerInformationData.takePhone == null
                "
              >
                未填写
              </span>
              <span v-else> {{ this.ownerInformationData.takePhone }}</span>
            </el-descriptions-item>
          </el-descriptions>
          <!-- 装运时效 -->
          <!-- <div style="margin: 20px 0"></div>
          <el-descriptions class="margin-top" :column="4" size="medium" border>
            
            
          </el-descriptions> -->
          <!-- 计价方式 -->
          <div style="margin: 20px 0"></div>
          <el-descriptions class="margin-top" :column="4" size="medium" border>
            <el-descriptions-item>
              <template slot="label"> 货源编号： </template>
              {{ this.ownerInformationData.goodNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 合同编号： </template>
              <span
                style="color: #2d8cf0; cursor: pointer"
                @click="DispatchOrder"
                v-if="
                  this.ownerInformationData.contractId != '' &&
                  this.ownerInformationData.contractId != null
                "
              >
                {{ this.ownerInformationData.contractNumber }}
              </span>
                <!-- @click="notSigned(ownerInformationData)" -->
              <span
                v-else
              >
              未签署
              </span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 货源类型： </template>
              <el-tag
                size="small"
                :type="
                  this.ownerInformationData.entrustedSource == '1'
                    ? 'info'
                    : 'success'
                "
              >
                {{
                  this.ownerInformationData.entrustedSource == "1"
                    ? "委托"
                    : "承运"
                }}</el-tag
              >
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label"> 货品名称： </template>
              {{ this.ownerInformationData.goodSubType }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 货品分类： </template>
              {{ this.ownerInformationData.goodType | GOOD_NEY_TYPE_CARRY }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">计价方式： </template>
              <span
                class="NotFilled"
                v-if="this.ownerInformationData.valuationUnit == null"
              >
                未填写
              </span>
              <span v-else>
                {{
                  this.ownerInformationData.valuationUnit == "1"
                    ? "按重量"
                    : this.ownerInformationData.valuationUnit == "2"
                    ? "按体积"
                    : "按件数"
                }}</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">定价方式： </template>

              <span>
                {{
                  this.ownerInformationData.pricingMethod == "1"
                    ? "定价"
                    : "竞价"
                }}</span
              >
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label"> 报价方式： </template>
              <span>
                {{
                  this.ownerInformationData.pricingType == "1"
                    ? "按单价"
                    : "按整单"
                }}</span
              >
            </el-descriptions-item>
            <!-- <el-descriptions-item>
              <template slot="label"> 是否开票： </template>
              <span>
                {{
                  this.ownerInformationData.invoicing == "1" ? "开票" : "不开票"
                }}</span
              >
            </el-descriptions-item> -->
            <el-descriptions-item>
              <template slot="label">发布数量： </template>
              <span>{{ this.ownerInformationData.totalGoodWeight }}</span>
              吨
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">剩余数量： </template>
              <span style="color: #dc143c">{{
                this.ownerInformationData.goodWeight
              }}</span>
              吨
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 体积： </template>
              {{
                this.ownerInformationData.volume == null
                  ? "0"
                  : this.ownerInformationData.volume
              }}
              m³
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 件数： </template>
              {{
                this.ownerInformationData.piece == null
                  ? "0"
                  : this.ownerInformationData.piece
              }}
              件
            </el-descriptions-item>
            <el-descriptions-item
              v-if="this.ownerInformationData.pricingType == '1'"
            >
              <template slot="label"> 运费单价： </template>
              <span style="color: #dc143c">{{
                this.ownerInformationData.platformUnitPrice != "" &&
                this.ownerInformationData.platformUnitPrice != null
                  ? this.ownerInformationData.platformUnitPrice
                  : "0"
              }}</span>
              元/吨
            </el-descriptions-item>
            <el-descriptions-item
              v-if="this.ownerInformationData.pricingType == '2'"
            >
              <template slot="label"> 运费总价： </template>
              <span style="color: #dc143c">{{
                this.ownerInformationData.platformTotalPrice != "" &&
                this.ownerInformationData.platformTotalPrice != null
                  ? this.ownerInformationData.platformTotalPrice
                  : "0"
              }}</span>
              元
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 货品单价： </template>

              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.goodsUnitPrice == null ||
                  this.ownerInformationData.goodsUnitPrice == ''
                "
              >
                未填写
              </span>
              <span v-else>
                {{ this.ownerInformationData.goodsUnitPrice }} 元/吨</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 允许货损： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.cargoDamage == null ||
                  this.ownerInformationData.cargoDamage == ''
                "
              >
                未填写
              </span>
              <span v-else>
                {{ this.ownerInformationData.cargoDamage }} </span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 结算方式： </template>
              {{ this.ownerInformationData.payType | PAYMENT }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 运输方式： </template>
              {{
                this.ownerInformationData.useVehicleType == "1"
                  ? "整车"
                  : "零担"
              }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 装卸方式： </template>
              {{ this.ownerInformationData.bagType | UNLOADING }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="LengthvehicleType">
              <template slot="label">所需车型： </template>
              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.vehicleType == '' ||
                  this.ownerInformationData.vehicleType == null
                "
              >
                未填写
              </span>
              <span v-else>{{
                this.ownerInformationData.vehicleType | MODEL_REQUIRED
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item content-class-name="LengthvehicleType">
              <template slot="label"> 所需车长： </template>

              <span
                class="NotFilled"
                v-if="
                  this.ownerInformationData.vehicleLength == '' ||
                  this.ownerInformationData.vehicleLength == null
                "
              >
                未填写
              </span>
              <span v-else>{{
                this.ownerInformationData.vehicleLength | REQUIRED_VEHILE_LENGTH
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label" content-class-name="LengthContent"
                >业务类型：
              </template>
              <span
                class="NotFilled"
                v-if="
                  ownerInformationData.businessType == '' ||
                  ownerInformationData.businessType == null
                "
              >
                未填写
              </span>
              <span v-else>
                <Tooltip max-width="200" content="干线普货运输">
                  干线普货运输
                </Tooltip>
              </span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label" content-class-name="LengthContent"
                >运输要求：
              </template>
              <span
                class="NotFilled"
                v-if="subRemarks == '' || subRemarks == null"
              >
                未填写
              </span>
              <span v-else>
                <Tooltip
                  max-width="200"
                  :content="this.ownerInformationData.content"
                >
                  {{ subRemarks }}
                </Tooltip>
              </span>
            </el-descriptions-item>
          </el-descriptions>

          <!-- 定价方式 -->
          <div style="margin: 20px 0"></div>
          <el-descriptions class="margin-top" :column="4" size="medium" border>
          </el-descriptions>
        </div>
        <!-- 驾驶员信息 -->
      </div>
    </Card>
    <div class="Cardokbtn">
      <div class="okbtn">
        <div style="margin-left: 40px">
          <!-- 状态 0进行中 1已关闭 2已完结 3已删除 -->
          <!-- <span v-if="this.ownerInformationData.status == '0'">
            &nbsp;
            <Button type="error" @click="closeOrder">关闭订单</Button>
          </span>
          <span v-if="this.ownerInformationData.status == '1'">
            &nbsp;
            <Button type="primary" @click="openOrder">开启订单</Button>
          </span>
          <span
            v-if="
              this.ownerInformationData.status == '0' ||
              this.ownerInformationData.status == '1'
            "
          >
            &nbsp;
            <Button type="error" @click="endOrder">完结订单</Button>
          </span>
          <span
            v-if="
              this.ownerInformationData.status == '0' ||
              this.ownerInformationData.status == '1'
            "
          >
            &nbsp;
            <Button type="primary" @click="ModifyDispatch">修改订单</Button>
          </span> -->
          <span>
            &nbsp;
            <Button @click="addDocumentaryRecord">处理日志</Button>
          </span>
          <!-- <span
            v-if="
              this.ownerInformationData.status == '0' &&
              this.ownerInformationData.entrustedSource == '2'
            "
          >
            &nbsp; &nbsp; &nbsp; &nbsp;
            <Button
              type="warning"
              :loading="loadingbut"
              @click="dispatchingDriver"
              >批量委托</Button
            >
          </span> -->
        </div>
      </div>
    </div>
    <div>
      <!--添加处理日志  -->
      <Modal
        v-model="documentaryRecordModal"
        title="处理日志"
        width="600"
        :styles="{ top: '100px' }"
      >
        <div>
          <div>
            <div class="comment-container">
              <div class="ontain">
                <div v-if="documentaryRecordList.length < 1">暂无数据</div>
                <div
                  else
                  class="listItem"
                  v-for="(item, index) in documentaryRecordList"
                  :key="`tousu${index}`"
                >
                  <div style="display: flex; word-break: break-all">
                    <div style="width:530px; width:inherit;display:block;white-space:normal;">
                      [{{ item.name }}] [{{ item.createTime }}]
                      {{ item.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Signcss">
            <div style="display: flex; margin-top: 15px">
              <div class="contentInput">
                <Input
                  type="textarea"
                  style="width: 400px"
                  v-model="singleRecord"
                  placeholder="请输入处理日志"
                  rows="2.4"
                  :autosize="{ minRows: 2.4, maxRows: 5 }"
                >
                </Input>
              </div>
              <!--  -->
            </div>
          </div>
        </div>
        <div slot="footer">
          <Button type="primary" :loading="documentarybtn" @click="sendRecord"
            >保存</Button
          >
        </div>
      </Modal>
    </div>
    <!-- 签署合同 -->
    <Drawer
      :mask-closable="false"
      :title="signContractTitle"
      width="600"
      v-model="signContract"
    >
      <iframe
        style="border: 0"
        :src="this.contractUrl"
        height="620"
        width="100%"
        name="demo"
        scrolling="auto"
        sandbox="allow-same-origin"
      ></iframe>
      <div style="margin-top: 15px">
        <Input
          :min="0"
          style="width: 250px"
          v-model="contractPassword"
          placeholder="请输入登录密码进行意愿认签"
        >
        </Input>
      </div>

      <div style="margin-top: 5px" class="check">
        <span style="color: red; font-size: 12px; font-weight: 500">
          请输入登录密码进行运输合同的意愿认签</span
        >
      </div>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="signContract = false"
          >取消</Button
        >
        <Button
          :loading="loadingSignContractBtn"
          @click="tionSignature"
          type="primary"
          >确认签署</Button
        >
      </div>
    </Drawer>
    <!-- 货主详情 -->
    <OwnerDetails
      @OwnerDetaiEnd="OwnerDetaiEnd"
      :OwnerDetailsId="OwnerDetailsId"
      :OwnerDetailsModalue="this.OwnerDetailsModalue"
    >
    </OwnerDetails>
    <!-- 驾驶员详情   -->
    <DriverDetails
      @DriverDetaEnd="DriverDetaEnd"
      :BidderdUserId="BidderdUserId"
      :driverModalue="this.driverModalue"
    >
    </DriverDetails>
    <!-- 车辆详情 -->
    <VehicleDetails
      @VehicleDetailsEnd="VehicleDetailsEnd"
      :VehicleDetailsId="VehicleDetailsId"
      :VehicleDetailsModalue="this.VehicleDetailsModalue"
    >
    </VehicleDetails>
  </div>
</template>

<script>
import {
  getEntrustedDetails, //获取订单详情 平台端的接口
  getDocumentaryList, // 根据订单id获取日志列表
  addDocumentary, // 添加处理日志
  orderPlatformQuotationRecord,
  entrustDriver,
} from "@/api/index";
import OwnerDetails from "@/views/componentsonn_source_goods/OwnerDetails";
import DriverDetails from "@/views/componentsonn_source_goods/DriverDetails";
import VehicleDetails from "@/views/componentsonn_source_goods/VehicleDetails";
import { getStore } from "@/libs/storage";

import { updateEntrustedState } from "@/api/ownerEnd/supplyNeed";

import defaultAvatar from "@/assets/customer.png";
import { signContract } from "@/api/ownerEnd/supplyNeed";
export default {
  data() {
    return {
      defaultAvatar: defaultAvatar, //默认头像
      // 签署合同
      signContract: false,
      signContractTitle: "签署合同",
      contractUrl: "",
      contractPassword: "",
      contractEntrustedId: "",
      loadingSignContractBtn: false,

      hideSelectDriver: true,
      BidderdUserId: "", //报价人Id
      driverModalue: false, //驾驶员详情弹框
      VehicleDetailsId: "", //车辆id
      VehicleDetailsModalue: false, //车辆详情弹框
      OwnerDetailsId: "", //货主Id
      OwnerDetailsModalue: false, //货主详情弹框
      shipperAvatar: "", //承运人头像
      carrierAvatar: "", //承运人头像
      documentaryRecordModal: false, //日志弹框
      documentarybtn: false, //日志按钮加载
      singleRecord: "", //日志内容
      DocumentaryImg: "", //图片路径
      driverEmpty: "",
      documentaryRecordList: [
        //处理日志列表
      ],
      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      dispatchOrderForm: {
        userIds: "",
        driverUnitPrice: "",
        driverTotalPrice: "",
        transGoodWeight: "",
        // payType: "",
        volume: "",
        piece: "",
        remarks: "",
      },
      // payTypelist: [],
      DispatchOrderRuleIn: {
        platformUnitPrice: [
          {
            type: "number",
            required: true,
            message: "请输入平台单价",
            trigger: "blur",
          },
        ],
        platformTotalPrice: [
          {
            type: "number",
            required: true,
            message: "请输入平台总价",
            trigger: "blur",
          },
        ],
        driverUnitPrice: [
          {
            type: "number",
            required: true,
            message: "请输入委托单价",
            trigger: "blur",
          },
        ],
        driverTotalPrice: [
          {
            type: "number",
            required: true,
            message: "请输入委托总价",
            trigger: "blur",
          },
        ],
        payType: [
          {
            required: true,
            message: "选择结算方式",
            trigger: "change",
          },
        ],
        transGoodWeight: [
          {
            type: "number",
            required: true,
            message: "请输入配载重量",
            trigger: "blur",
          },
        ],
      },
      loadingbut: false,
      ReleaseScopeModal: false,
      subRemarks: "", //备注展示
      getQuotationRecordData: [], //报价单数据
      beginAreaCodeShow: "", //起始县区列表 回显code
      endAreaCodeShow: "", //结束县区列表 回显code
      ownerInformationData: { cargoOwnerInfoVo: {}, platformInfoVo: {} },
      data: [],
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 5, // 页面大小
        sort: "", // 默认排序字段
        order: "", // 默认排序方式
        orderGoodsId: "",
      },
      pageNumber: 1, // 当前页数
      pageSize: 5, // 页面大小
      total: 0, // 表单数据总数
      dispatchOrderDetails: "",
      SelectedDriverlist: [], //返回值选择驾驶员
      driveres: "",
      columns: [
        {
          title: "报价编号",
          key: "quotationNo",
          minWidth: 190,
          sortable: false,
        },
        {
          title: "报价时间",
          key: "createTime",
          minWidth: 170,
          sortable: false,
        },
        {
          title: "报价人",
          key: "driverName",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
            {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.BidderdDiver(params.row);
                      },
                    },
                  },
                  params.row.driverName
                ),
              ]);
            }
          },
        },
        {
          title: "车辆",
          key: "vehicleNum",
          minWidth: 120,
          render: (h, params) => {
            {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.LookVehicleInfo(params.row);
                      },
                    },
                  },
                  params.row.vehicleNum
                ),
              ]);
            }
          },
        },
        {
          title: "当前报价",
          key: "",
          minWidth: 220,
          render: (h, params) => {
            return h("div", [
              h("span", "￥" + params.row.platformUnitPrice),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h("span", "￥" + params.row.platformTotalPrice),
            ]);
          },
        },
        {
          title: "向上报价",
          key: "",
          minWidth: 220,
          render: (h, params) => {
            if (params.row.platformTotalPrice == null) {
              return h("div", "未报价");
            } else {
              return h("div", [
                h("span", "￥" + params.row.driverUnitPrice),
                h("Divider", {
                  props: {
                    type: "vertical",
                  },
                }),
                h("span", "￥" + params.row.driverTotalPrice),
              ]);
            }
          },
        },
        {
          title: "拟承运量",
          key: "transGoodWeight",
          minWidth: 210,
          render: (h, params) => {
            let volume = 0;
            let piece = 0;
            if (params.row.volume == null) {
              volume = 0;
            } else {
              volume = params.row.volume;
            }

            if (params.row.volume == null) {
              piece = 0;
            } else {
              piece = params.row.volume;
            }
            return h("div", [
              h("span", params.row.transGoodWeight + "吨"),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h("span", volume + " m³"),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h("span", piece + " 件"),
            ]);
          },
        },
        {
          title: "备注",
          key: "remarks",
          minWidth: 140,
          tooltip: true,
        },
        {
          title: "变更记录",
          key: "number",
          minWidth: 100,
          render: (h, params) => {
            let text = params.row.number;
            let numlist;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: "top", maxWidth: "280", transfer: true },
              },
              [
                h("div", {}, text),
                h(
                  "span",
                  {
                    slot: "content",
                  },
                  params.row.details.map((item) => {
                    return <p>{item}</p>;
                  })
                ),
              ]
            );
          },
        },
        {
          title: "操作",
          key: "",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
            if (params.row.platformState == "2") {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.OrderDelegation(params.row);
                        // if (
                        //   this.ownerInformationData.status == 3 ||
                        //   this.ownerInformationData.status == 4
                        // ) {
                        // this.OrderDelegation(params.row);
                        // }
                      },
                    },
                  },
                  "委托"
                ),
              ]);
            } else if (params.row.platformState == "3") {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        //查看运单详情
                      },
                    },
                  },
                  "运单"
                ),
              ]);
            }
          },
        },
      ],
    };
  },
  components: {
    OwnerDetails,
    DriverDetails,
    VehicleDetails,
  },
  created() {},
  mounted() {
    this.dispatchOrderDetails = JSON.parse(this.$route.query.key);
    this.init();
    // let arr = JSON.parse(window.localStorage.getItem("payment_method_type"));
    // for (let i = 0; i < arr.length; i++) {
    //   let obj = {};
    //   obj.label = arr[i].description;
    //   obj.value = arr[i].value;
    //   this.payTypelist.push(obj);
    // }
  },
  methods: {
    init() {
      this.getDataList();
      this.quotationRecord();
    },
    // 获取报价记录
    quotationRecord() {
      orderPlatformQuotationRecord({
        orderId: this.dispatchOrderDetails.entrustedId,
      }).then((res) => {
        if (res.code == 200) {
          this.getQuotationRecordData = res.result; //填充调度派单
          this.total = res.result.total;
          if (
            this.getQuotationRecordData.length == 0 &&
            this.searchForm.pageNumber > 1
          ) {
            this.searchForm.pageNumber -= 1;
            this.quotationRecord();
          }
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //发布范围
    ReleaseScopeClick() {
      this.ReleaseScopeModal = true;
    },
    getDataList() {
      this.subRemarks = "";
      getEntrustedDetails({
        entrustedId: this.dispatchOrderDetails.entrustedId,
      }).then((res) => {
        if (res.code == 200) {
          this.ownerInformationData = res.result;
          this.beginAreaCodeShow =
            this.ownerInformationData.beginProvinceName +
            this.ownerInformationData.beginCityName +
            this.ownerInformationData.beginAreaName;

          this.endAreaCodeShow =
            this.ownerInformationData.endProvinceName +
            this.ownerInformationData.endCityName +
            this.ownerInformationData.endAreaName;
          if (this.ownerInformationData.cargoOwnerInfoVo == null) {
            this.ownerInformationData.cargoOwnerInfoVo = {};
          }
          if (this.ownerInformationData.cargoOwnerInfoVo.avatar) {
            if (
              this.ownerInformationData.cargoOwnerInfoVo.avatar.indexOf(":") !==
              -1
            ) {
              this.shipperAvatar = this.defaultAvatar;
            } else {
              this.shipperAvatar =
                this.$baseUrl +
                "/freight/file/view/" +
                this.ownerInformationData.cargoOwnerInfoVo.avatar +
                "?accessToken=" +
                this.accessToken +
                "&preview=true";
            }
          } else {
            this.shipperAvatar = this.defaultAvatar;
          }
          //

          if (this.ownerInformationData.platformInfoVo.avatar) {
            if (
              this.ownerInformationData.platformInfoVo.avatar.indexOf(":") !==
              -1
            ) {
              this.carrierAvatar = this.defaultAvatar;
            } else {
              this.carrierAvatar =
                this.$baseUrl +
                "/freight/file/view/" +
                this.ownerInformationData.platformInfoVo.avatar +
                "?accessToken=" +
                this.accessToken +
                "&preview=true";
            }
          } else {
            this.carrierAvatar = this.defaultAvatar;
          }

          //  计算平台单价总价 单价没有重量 总价的时候有重量

          if (this.ownerInformationData.pricingType == "2") {
            // 整价
            this.dispatchOrderForm.transGoodWeight =
              this.ownerInformationData.goodWeight;

            this.dispatchOrderForm.piece = this.ownerInformationData.piece;

            this.dispatchOrderForm.volume = this.ownerInformationData.volume;

            this.dispatchOrderForm.driverTotalPrice =
              this.ownerInformationData.driverTotalPrice;
            this.dispatchOrderForm.driverUnitPrice =
              Math.floor(
                (this.dispatchOrderForm.driverTotalPrice /
                  this.dispatchOrderForm.transGoodWeight) *
                  100
              ) / 100;
          } else {
            // 单价
            this.dispatchOrderForm.driverUnitPrice =
              this.ownerInformationData.driverUnitPrice;

            this.dispatchOrderForm.driverTotalPrice =
              Math.floor(
                this.dispatchOrderForm.driverUnitPrice *
                  this.dispatchOrderForm.transGoodWeight *
                  100
              ) / 100;
          }

          if (this.ownerInformationData.content != null) {
            if (this.ownerInformationData.content.length >= 15) {
              let text1 = this.ownerInformationData.content.substring(0, 10);
              this.subRemarks = `${text1}....`;
            } else {
              this.subRemarks = this.ownerInformationData.content;
            }
          }
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 调度派单委托
    OrderDelegation(row) {
      if (
        this.ownerInformationData.contractId == "" ||
        this.ownerInformationData.contractId == null
      ) {
        return this.$Message.warning("合同未签署 请先签署合同");
      }
      this.$Modal.confirm({
        title: "确认委托",
        content: "确认委托该订单？",
        loading: true,
        onOk: () => {
          // 委托
          entrustDriver({ quotationRecordId: row.quotationRecordId }).then(
            (res) => {
              this.$Modal.remove();
              if (res.code == 200) {
                this.$Message.success("操作成功");
                this.init();
              } else {
                this.$Message.error(res.message);
              }
            }
          );
        },
      });
    },
    // 未签署合同
    notSigned(row) {
      this.contractPassword = "";
      this.contractEntrustedId = row.entrustedId;
      this.signContract = true;
      this.contractUrl =
        this.$baseUrl +
        "/freight/system/companyContract?entrustedId=" +
        row.entrustedId +
        "&accessToken=" +
        this.accessToken +
        "&preview=true";
    },
    // 确定签署
    tionSignature() {
      if (this.contractPassword == "") {
        return this.$Message.warning("请输入登录密码进行意愿认证");
      }
      this.loadingSignContractBtn = true;
      let data = {
        entrustedId: this.contractEntrustedId,
        password: this.contractPassword,
      };
      signContract(data).then((res) => {
        this.loadingSignContractBtn = false;
        if (res.code == 200) {
          this.$Message.success("合同签署成功");
          this.getDataList();
          this.signContract = false;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 合同编号
    DispatchOrder() {
      let pdf = "";
      pdf =
        this.$baseUrl +
        "/freight/file/view/" +
        this.ownerInformationData.contractId +
        "?accessToken=" +
        this.accessToken +
        "&preview=true";
      window.open(pdf, "_blank");
    },
    // 修改订单
    ModifyDispatch() {
      this.ownerInformationData.entrustedId =
        this.dispatchOrderDetails.entrustedId;
      this.$router.push({
        name: "ModifyDispatchOrder",
        query: {
          key: this.$route.query.key,
          row: JSON.stringify(this.ownerInformationData),
        },
      });
    },
    // 完结订单
    endOrder() {
      this.$Modal.confirm({
        title: "确认完结",
        content: "确认完结该订单？",
        loading: true,
        onOk: () => {
          updateEntrustedState({
            entrustedId: this.dispatchOrderDetails.entrustedId,
            status: 2,
          }).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("操作成功");
              this.init();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 关闭订单
    closeOrder() {
      this.$Modal.confirm({
        title: "确认关闭",
        content: "确认关闭该订单？",
        loading: true,
        onOk: () => {
          updateEntrustedState({
            entrustedId: this.dispatchOrderDetails.entrustedId,
            status: 1,
          }).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("操作成功");
              this.init();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 开启订单
    openOrder() {
      this.$Modal.confirm({
        title: "确认开启",
        content: "确认开启该订单？",
        loading: true,
        onOk: () => {
          updateEntrustedState({
            entrustedId: this.dispatchOrderDetails.entrustedId,
            status: 0,
          }).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("操作成功");
              this.init();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    //调度派单指定驾驶员
    dispatchingDriver() {
      this.$router.push({
        name: "entrustedDriver",
        query: {
          key: this.$route.query.key,
          row: this.$route.query.row,
        },
      });
    },
    // 查看处理日志
    addDocumentaryRecord() {
      this.documentaryRecordModal = true;
      getDocumentaryList({
        orderId: this.dispatchOrderDetails.entrustedId,
      }).then((res) => {
        if (res.code == 200) {
          this.documentaryRecordList = res.result;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //添加处理日志
    sendRecord() {
      if (this.singleRecord == "") {
        return this.$Message.warning("请输入处理日志");
      }
      this.documentarybtn = true;
      let data = {
        operationId: this.dispatchOrderDetails.entrustedId,
        content: this.singleRecord,
      };
      addDocumentary(data).then((res) => {
        this.documentarybtn = false;
        this.addDocumentaryRecord();
        this.singleRecord = "";
        if (res.code == 200) {
          this.$Message.success("添加处理日志成功");
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 表单反页
    changePage(v) {
      this.searchForm.pageNumber = v;

      this.quotationRecord();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.quotationRecord();
    },
    // 返回
    goBack() {
      this.$router.push({
        name: "ownerManagement/supply-damin/order-admin/orderLsit",
        query: {
          key: this.$route.query.key,
        },
      });
    },

    //货主详细信息
    LookCargoOwnerInfo() {
      this.OwnerDetailsId = this.ownerInformationData.shipperUserId;
      this.OwnerDetailsModalue = true;
    },
    // 货主详细信息关闭
    OwnerDetaiEnd(val) {
      this.OwnerDetailsModalue = val;
      this.OwnerDetailsId = "";
    },

    // 查看车辆详细
    LookVehicleInfo(row) {
      this.VehicleDetailsModalue = true;
      this.VehicleDetailsId = row.vehicleId;
    },
    //车辆详细信息关闭
    VehicleDetailsEnd(val) {
      this.VehicleDetailsModalue = val;
      this.VehicleDetailsId = "";
    },

    // 驾驶员
    BidderdDiver(row) {
      this.BidderdUserId = row.driverUserId;
      this.driverModalue = true;
    },
    // 驾驶员详情关闭
    DriverDetaEnd(val) {
      this.driverModalue = val;
      this.BidderdUserId = "";
    },
  },
};
</script>

<style lang="less">
.InputNuspanfont {
  position: absolute;
  top: 2px;
  right: -45px;
  width: 50px;
  height: 31px;
  padding: 7px 0 0 0;
  text-align: center;
  line-height: 60px;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  color: #515a6e;
  text-align: center;
  // background-color: #f8f8f9;
  // border: 1px solid #dcdee2;
  border-radius: 4px;
}
.my-content {
  width: 100px;
}
.my-limitation {
  width: 170px;
}
.Line {
  // border-bottom: 1px solid #eee;
  // border-bottom-color: rgb(255, 255, 255);
  border: 0;
  border-top: 1px solid #eee;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(238, 238, 238);
  border-bottom: 1px solid #fff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 255, 255);
  margin: 20px 0;
}
.newcarrier {
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
  .Ownerportrait {
    margin-top: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #eee;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .carrierName {
    margin-left: 17px;
    padding: 25px 0;
    .carrierName1 {
      margin-left: 10px;
      color: #999999;
    }
    .Owner-company {
      margin-top: 10px;
      cursor: pointer;
    }
  }
}
.PriceStatuspa {
  position: absolute;
  top: 2px;
  right: -45px;
  width: 50px;
  height: 31px;
  padding: 7px 0 0 0;
  text-align: center;
  line-height: 60px;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  color: #515a6e;
  text-align: center;
  // background-color: #f8f8f9;
  // border: 1px solid #dcdee2;
  border-radius: 4px;
}
.shipper {
  position: absolute;
  top: 60px;
  left: 42px;
  font-size: 14px;
  font-weight: 600;
}
.carrier {
  position: relative;
  top: -10px;
  left: 50px;
  font-size: 14px;
  font-weight: 600;
}
.ReasonRejection {
  color: #08c;
  margin-left: -600px;
  padding: 25px 0;
  margin-top: 20px;
}
.ReasonsFailureAudit {
  color: red;
}
.deeltesWays {
  width: 65px;
  background-color: rgb(70, 136, 71);
  color: #fff;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  margin-left: 9px;
  border-radius: 3px;
  display: inline-block;
  height: 22px;
  margin-bottom: -8px;
}
.ordertiem {
  padding-top: 35px;
  padding-left: 20px;
  .statee,
  .implemented,
  .end,
  .refuse,
  .AuditFailed,
  .quotation,
  .deeltes {
    width: 50px;
    margin-bottom: 10px;
    background-color: rgb(70, 136, 71);
    color: #fff;
    // line-height: 55px;
    padding: 2px 0;
    text-align: center;
    font-size: 12px;
    margin-left: 9px;
    border-radius: 3px;
    display: inline-block;
  }
  .quotation {
    background-color: rgb(70, 136, 71);
  }
  .implemented {
    background-color: #2d8cf0;
  }
  .deeltes {
    background-color: #d3d3d3;
  }
  .AuditFailed {
    background-color: #dc143c;
    width: 70px;
    margin-left: 83px;
  }
}
.ordinary,
.emergencyState,
.extraUrgent,
.extraUrgen {
  width: 50px;
  margin-bottom: 10px;
  // background-color: #FF8C00;
  color: #fff;
  // line-height: 55px;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  margin-left: 9px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 31px;
}
.ordinary {
  background-color: #808080;
}
.emergencyState {
  background-color: #ff8c00;
}
.extraUrgent {
  background-color: #dc143c;
}
.CarrierSource {
  width: 70px;
  margin-bottom: 10px;
  background-color: #808080;
  color: #fff;
  // line-height: 55px;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  margin-left: 25px;
  border-radius: 3px;
  display: inline-block;
}
.butTable {
  width: 100%;
  padding: 5px;
  // border: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  // background-color: #f8f8f9;
  .butTableoffer {
    font-size: 16px;
    font-weight: 700;
    margin-top: 5px;
    margin-left: 5px;
    font-size: 16px;
    margin-bottom: 6px;
    span {
      font-size: 14px;
      font-weight: 400;
      // color: #909399;
    }
  }
}

.Cardokbtn {
  position: relative;
  bottom: -5px;
  left: 0;
}
.okbtn {
  z-index: 99999;
  width: 100%;
  margin-top: -15px;
  background-color: #f5f5f5;
  border: 1px solid #cdcdcd;
  height: 70px;
  line-height: 70px;
}

.ListItemcss {
  height: 200px;
  overflow: auto;
}
.ListItemMetacss {
  margin-left: 40px;
}
.ListItemMetac1 {
  width: 350px;
  margin-left: 110px;
  color: #999999;
  font-size: 10px;
}
.el-descriptions__header {
  margin-bottom: 10px;
}
.NotFilled {
  font-size: 14px;
  color: #a9a9a9;
}
.LengthvehicleType {
  width: 250px;

  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
}

.ordercss {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
}
.TagModal {
  float: left;
  margin: 5px;
}
.newcarrierLeft {
  margin-left: -150px;
}

.carryDeiverName {
  cursor: pointer;
  font-weight: 600;
  margin-left: 13px;
  color: #08c;
}

.carryVehicleName {
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  color: #08c;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 60px;
  height: 60px;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.contentInput {
  margin-top: 6px;
}
.documentarys {
  margin-top: 5px;
  margin-left: 10px;
}
.documentaryfot {
  position: relative;
  top: -45px;
  left: -8px;
}
.listItem {
  padding: 7px;
  font-size: 14px;
  border-bottom: 1px #333 dotted;
  width: 99%;
}
.Signcss {
  margin-top: 15px;
}
.commekd {
  margin-bottom: 20px;
}
.ontain {
  height: 220px;
  overflow-y: scroll;
}
.ontainlength {
  height: 20px;
}
.table table {
  // table-layout: auto;
  width: 100% !important;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
